
<html lang="zh">
<head>
    <title>测试</title>
</head>
<script type="text/javascript" src="{{ asset('js/jquery-3.7.1.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.3.js')}}"></script>
<body>
<div class="dragsource">
    <p>拽我!</p>
</div>
<iframe id="ViewIframe" src="{{url('left')}}" width="100%" height="100%" frameborder="0"></iframe>
</body>
<script>
    $(function() {
        $(".dragsource").draggable({
            //拖动时，克隆
            helper: "clone",
            //禁止iframe一直获取到拖动动作，防止卡死
            iframeFix: true,
            stop: function(event, ui) {
                var iframe = $('#ViewIframe')[0];
                // 确保iframe的文档已经加载
                if (iframe.contentWindow && iframe.contentWindow.document.readyState === 'complete') {
                    // 复制当前元素及其内容（不包括jQuery数据或事件）
                    var clone = $(this).clone().get(0);
                    // 转换为HTML字符串（不包括jQuery数据或事件）
                    var htmlContent = $('<div>').append(clone).remove().html();
                    // 发送消息到iframe
                    iframe.contentWindow.postMessage({
                        action: 'appendContent',
                        content: htmlContent
                    }, '*'); // 注意：'*' 表示允许所有域，但出于安全考虑，最好指定具体的域
                }
            }
        });
    });
</script>
</html>
